<template>
<div class="bigbox">
    <van-nav-bar
  left-text="返回"
  left-arrow
  @click-left="goBackTo"
/>
<!-- 绑定点击事件 -->
<div class="box">
   {{list.name}}
    
</div>

   <div class="labebox" >
    <!-- 循环拿到list数组的.services的数据-->
    <span v-for="(item,index) in list.services" :key="index">{{item.name}}</span>
   
   </div>

<div class="apbox">
    <div>
        <span><van-icon name="location-o" /></span>
        <span>{{list.address}}</span>
    </div>
    <div>
        <span><a href="'tel://'+list.phone"><van-icon name="phone-o" size="20px"  /></a></span>
    </div>
</div>


<div class="moviebox"> 
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <!-- 循环拿到str数组的值 -->
            <div class="swiper-slide" v-for="(item,index) in str" :key="index"><img :src="item.poster" alt=""></div>
        </div>
  </div>
</div>

  <div class="infobox"   v-if="str[onthewho]">
  <div class="titlebox"  >
        <span>{{this.str[this.onthewho].name}}</span>
        <span>{{this.str[this.onthewho].grade}}分</span>
  </div>
  <div class="film-desc">{{this.str[this.onthewho].category}}|{{this.str[this.onthewho].runtime}}分钟| <span v-for="(v,i) in this.str[this.onthewho].actors" :key="i" > {{v.name}}|</span></div>
</div>

<div  v-if="str[onthewho]" >
    <van-tabs @change="timetojump">
<van-tab v-for="(item,index) in str[onthewho].showDate" :name='item' :title="toMD(item)" :key="index">
  </van-tab>
  <div>
 
  </div>
</van-tabs>
</div>



<router-view/>
</div>
  
  
</template>

<script>
import Swiper from 'swiper'
import 'swiper/dist/css/swiper.css'
import tiem from '../utils/tiem'
export default {
    data(){
        return{
            list:{},
            str:[],
           onthewho:0,
           did:{}
        }
    },


    methods:{
        ...tiem,
        goBackTo(){
            
         this.$router.replace({name:"cinema"})
                  },
         timetojump(name, title){
            // console.log(name,title);
            //切换的时候， 在原地址中加上time路由参数 
               this.$router.replace(`/cinemainfo/${this.$route.params.id}/${this.$route.params.did}/${name}`)
         }         
        },
    

 mounted(){
              //定义point为this 方便在其他作用域中可以通过point拿到全局中的数据
                var point = this ;
                // 请求获取影院详情的数据需要传id拿到对应的影院详情
                // id是影院的id
                this.$http.get('cinemaInfo',{params:{cinemaId:this.$route.params.id}}).then(res=>{
                    // console.log(res);
                    // console.log(this.$route.params.id);
                    // 把拿到值赋值给list
                        this.list = res.data.cinema
                        })
                    // 请求影院排片的数据 需要传id拿到对应的影院的排片
                    this.$http.get('filmSchedule',{params:{cinemaId:this.$route.params.id}}).then(res=>{
                        // console.log(res.data.films);
                        // console.log(this.$route.params.did);
                        this.did = this.$route.params.did
                        // 把获取到影院排片赋值给str
                        this.str = res.data.films
                        // this.$router.replace(`/cinemainfo/${id}/${this.srt[this.onthewho].filmId}`)
                    this.$nextTick(()=>{
                        var swiper = new Swiper('.swiper-container', {
                            slidesPerView: 3,
                            spaceBetween: 30,
                            centeredSlides: true,
                            on:{
                                click:function(){
                                    this.slideTo(this.clickedIndex)
                                    point.onthewho = this.clickedIndex;

                                    point.$router.replace(`/cinemainfo/${point.$route.params.id}/${point.str[point.onthewho].filmId}/${this.str[this.onthewho].showDate[0]}`)
                                }
                            }
                        });
                    //   console.log(this.did);
                    //   console.log(this.$route.params.did );
                    let cd = 0;
                    //判断有没有did
                    if(this.$route.params.did ){
                        // 有did,滑动swiper显示当前的did的电影详情  
                        for( let i=0; i<this.str.length; i++){
                            if(this.did == this.str[i].filmId){
                                cd = i ;
                                break
                            }
                        }
                        this.onthewho = cd
                        swiper.slideTo(cd)
                         this.$router.replace(`/cinemainfo/${this.$route.params.id}/${this.str[this.onthewho].filmId}/${this.str[this.onthewho].showDate[0]}`)
                    }else{
                        //  console.log(this.$route.params);
                        //没有did就跳转到第一个去
                    this.$router.replace(`/cinemainfo/${this.$route.params.id}/${this.str[this.onthewho].filmId}/${this.str[this.onthewho].showDate[0]}`)
                         }
                    });
            
                    })
     }
}
</script>

<style scoped>
.bigbox{
    background: #fff;
    overflow: hidden;
}
.box{
    width: 100%;
    height: 30px;
    text-align: center;
    font-size: 17px;
    color: #191a1b;
    line-height: 30px;
    margin-top: 10px;
}
.labebox{

    width: 100%;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    padding: 5px 15px;
    border-bottom: 1px solid #ededed;
}
.labebox>span{
    border: 1px solid #ffb232;
    color: #ffb232;
    font-size: 12px;
    padding: 2px 5px;
    transform: scale(.78);
}
.apbox{
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding: 5px 15px;
    height: 50px;
}
.apbox>div>span>a{
    color: #191a1b;
}
.moviebox{
    width: 100%;
    height: 160px;
    border: 1px solid red;
    box-sizing: border-box;
    padding: 15px 0;
}
/*------------------- */
   .swiper-container {
      width: 100%;
      height: 100%;
    }
    .swiper-slide {
      text-align: center;
      font-size: 18px;
      background: #fff;
      /* border: 1px solid red; */
      box-sizing: border-box;

      /* Center slide text vertically */
      display: -webkit-box;
      display: -ms-flexbox;
      display: -webkit-flex;
      display: flex;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      -webkit-justify-content: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      -webkit-align-items: center;
      align-items: center;
	  transition: 300ms;
	  transform: scale(0.8);
    }
	.swiper-slide-active,.swiper-slide-duplicate-active{
      transform: scale(1);
	}
     .swiper-slide img{
        width: 100%;
     }
    .infobox{
     border-bottom: 1px solid #ededed;
    padding-bottom: 20px;
    } 
    .titlebox{
        display: flex;
        justify-content: center;
        align-content: center;
        padding: 5px;
    }
     .titlebox>span:nth-child(1){
        font-size: 15px;
        padding-right: 5px;
        color: #191a1b;
     }
      .titlebox>span:nth-child(2){
        color: #ffb232;
        font-style: italic;
        font-size: 16px;
     }
    .film-desc{
    
        text-align: center;
        height: 18px;
        color: #797d82;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        font-size: 13px;
        padding: 0 12%;
    }
</style>